<template>
    <!--添加按钮-->
    <div class="tools-div">
        <el-button type="success" size="small" @click="addmopation">添 加</el-button>
    </div>
    <!---数据表格-->
    <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"/>
        <el-table-column prop="mname" label="运动方案" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="primary" size="small" @click="editShow(scope.row)">
                编辑
            </el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
        </el-table-column>
    </el-table>

    <!-- 添加/修改 -->
    <el-dialog v-model="dialogVisible" title="添加/修改" width="40%">
        <el-form label-width="120px">
            <el-form-item label="运动方案">
                <el-input v-model="moptis.mname"/>
            </el-form-item>

            <el-form-item label="运动类型列表">
                <el-checkbox-group v-model="MoptionandmoveList.movOptionList">
                    <el-checkbox v-for="role in ids" :key="role.id" :label="role.id" :value="role.id">
                        {{ role.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="falseAll">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 

    <!--分页条-->
    <el-pagination
                    v-model:current-page="pageParams.page"
                    v-model:page-size="pageParams.limit"
                    :page-sizes="[10, 20, 50, 100]"
                    @size-change=""
                    @current-change=""
                    layout="total, sizes, prev, pager, next"
                    :total="total"
        />
</template>

<script setup>
import { ref,onMounted, reactive } from 'vue'; 
import {findMoption,addMoption,findMoptionById,updateMoption,DeleteMoptionById} from '@/api/moption';
import {findMovement,findSports} from '@/api/movement';
import { ElMessage,ElMessageBox } from 'element-plus'

//数据模板
let list = ref([])


let ids = ref([])
//分页总条数
let total = ref(0)
const pageParamsForm = {
    page : 1,
    limit: 3
}
let moptis = ref({
    id:'',
    mname:''
})
const optionById = ref([])
//添加数据对象
const MList = {
    moption: moptis.value,
    //运动项目数据模板
    movOptionList: []
}
const MoptionandmoveList = ref(MList)
const sporList = ref({

})
const dialogVisible = ref(false)
const pageParams = ref(pageParamsForm)
onMounted(()=>{
    findMoptions()
    findSportsAll()
})
//查询所有运动项目
const findMovements = async()=>{
    const {data} = await findMovement()
    ids.value = data
}
const findSportsAll = async()=>{
    const {data} = await findSports()
    sporList.value = data
}

const findMoptions = async ()=>{
    const {data} = await findMoption()
    list.value = data
}
//打开添加弹框
const addmopation = ()=>{
    findMovements()
    dialogVisible.value = true
    
}

//取消按钮
const falseAll = ()=>{
    dialogVisible.value = false
    MoptionandmoveList.value.movOptionList = []
    moptis.value = {
        id:'',
        mname:''
    }
}

//修改按钮根据id查询信息
const editShow = async(row)=>{
    dialogVisible.value = true
    findMovements()
    const {data} = await findMoptionById(row.id)
    MoptionandmoveList.value.moption.id = row.id
    MoptionandmoveList.value.moption = data.moption
    moptis.value = data.moption
    optionById.value = data.yiXuan
    for (let i = 0; i < optionById.value.length; i++) {
        MoptionandmoveList.value.movOptionList.push(optionById.value[i].movId) 
    }
    
}

//添加数据
const submit = async ()=>{
    if(!moptis.value.id){
        //如果没有id那么就是添加数据
        const {code} = await addMoption(MoptionandmoveList.value)
        if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
            findMoptions()
        }
    }else{
        //有id就是修改
        const {code} = await updateMoption(MoptionandmoveList.value)
        if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
            findMoptions()
        }
    }
}
//删除信息
const deleteById = async (row)=>{
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
       const {code } = await DeleteMoptionById(row.id)
       if(code === 200) {
            ElMessage.success('删除成功')
            findMoptions()
       }
    })
}



</script>

<style lang="scss" scoped>

</style>